import React, { Component } from 'react';
import { Form, Row, Col, Icon } from 'antd';
import ShowType from '../../../routes/common/showType';
import * as commonFunc from '../../Common/commonFunc';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const FormItem = Form.Item;

class TabMainTableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sBillType: '', /* 调整类型 */
      sFamilyId: '', /* ID */
      sFamilyName: '', /* 名称 */
      dAdjustMoney: '', /* 调整金额 */
      sEmployeeId: '', /* 调整人 */
      sCheckPerson: '', /* 审核人 */
      sBillNo: '', /* 单据号 */
      tCreateDate: '', /* 制单日期 */
      sMakePerson: '', /* 制单人 */
      tAdjustDate: '', /* 调整日期 */
      tCheckDate: '', /* 审核日期 */
      sMemo: '', /* 调整事由 */
      reserveContent: '',
      expand: false,
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId,
    } = this.state;
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/cahfinancialadjust', returnType: 'data',
        },
      });
      /* 获取主表数据 */
    } else if (sId === '' && this.props.newIdFlag) {
      const url = `${config.server_host}getUuid/${this.props.newIdlength}`;
      dispatch({
        type: 'content/getCopyDataId',
        payload: {
          sTabId, url, formRoute: '/cahfinancialadjust', componentName,
        },
      });
    }
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sBillType: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbilltype'))[0],
        sFamilyId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sfamilyid'))[0],
        sFamilyName: mainConfig.filter(item => (item.sName.toLowerCase() === 'sfamilyname'))[0],
        dAdjustMoney: mainConfig.filter(item => (item.sName.toLowerCase() === 'dadjustmoney'))[0],
        sEmployeeId: mainConfig.filter(item => (item.sName.toLowerCase() === 'semployeeid'))[0],
        sCheckPerson: mainConfig.filter(item => (item.sName.toLowerCase() === 'scheckperson'))[0],
        sBillNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbillno'))[0],
        tCreateDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tcreatedate'))[0],
        sMakePerson: mainConfig.filter(item => (item.sName.toLowerCase() === 'smakeperson'))[0],
        tAdjustDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tadjustdate'))[0],
        tCheckDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tcheckdate'))[0],
        sMemo: mainConfig.filter(item => (item.sName.toLowerCase() === 'smemo'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    this.setState({ disabled, dataList: dataSet });
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
      this.setState({ sId });
    }
    const mainConfig = this.state.masterConfig.gdsconfigformslave;
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, app, form } = nextProps;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled,
      };
      const reserveContent = commonFunc.Reserve(mainConfig, childProps);
      this.setState({ reserveContent });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleSelect = (value) => {
    /* 单据类型不同，界面弹窗不同 */
    const { sFamilyId, sFamilyName } = this.state;
    if (value !== undefined) {
      if (value === 'ap' || value === 'purMoney') {
        sFamilyId.sActiveId = '192116810113315232543913910';
        sFamilyId.sAssignField = 'sFamilyName:sId[-]sSupplyNo,sFamilyName:sSupplyName';
      } else {
        sFamilyId.sActiveId = '192116810113315224003237670';
        sFamilyId.sAssignField = 'sFamilyId:sId[-]sCustomerNo,sFamilyName:sCustomerName';
      }
      this.setState({ sFamilyId, sFamilyName });
    }
  };

  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const {
      dataList, sId, sActiveId, disabled, reserveContent, expand,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      handleSelectChange,
      dataName,
      dataType,
      onClose,
    };
    const {
      sBillType, sFamilyId, sFamilyName, dAdjustMoney, sEmployeeId, sCheckPerson,
    } = this.state;
    const {
      sBillNo, tCreateDate, sMakePerson, tAdjustDate, tCheckDate, sMemo,
    } = this.state;
    const sBillTypeProps = { showConfig: sBillType, ...childProps };
    const sFamilyIdProps = { showConfig: sFamilyId, ...childProps };
    const sFamilyNameProps = { showConfig: sFamilyName, ...childProps };
    const dAdjustMoneyProps = { showConfig: dAdjustMoney, ...childProps };
    const sEmployeeIdProps = { showConfig: sEmployeeId, ...childProps };
    const sCheckPersonProps = { showConfig: sCheckPerson, ...childProps };
    const sBillNoProps = { showConfig: sBillNo, ...childProps };
    const tCreateDateProps = { showConfig: tCreateDate, ...childProps };
    const sMakePersonProps = { showConfig: sMakePerson, ...childProps };
    const tAdjustDateProps = { showConfig: tAdjustDate, ...childProps };
    const tCheckDateProps = { showConfig: tCheckDate, ...childProps };
    const sMemoProps = { showConfig: sMemo, ...childProps };
    const halfformItemLayout = { labelCol: { span: 11 }, wrapperCol: { span: 11 } };
    const allformItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 15 } };
    return (
      <FormItem className={styles.searchMainForm}>
        <Row type="flex" style={{ height: expand ? 'auto' : '100px', overflow: 'hidden' }}>
          <Col
            span={6}
            order={sBillType.iOrder > 24 ? 24 : sBillType.iOrder}
            style={{ display: sBillType.bVisible ? 'block' : 'none' }}
          >
            <Row>
              <Col span={15}>
                <ShowType
                  sName="sBillType"
                  showDefaultName="调整类型"
                  {...sBillTypeProps}
                  formItemLayout={halfformItemLayout}
                  onSelect={this.handleSelect.bind(this)}
                />
              </Col>
              <Col span={7}>
                <ShowType sName="sFamilyId" morePopup showDefaultName="客户ID/供应商ID" {...sFamilyIdProps} labelNo />
              </Col>
            </Row>
          </Col>
          <Col
            span={6}
            order={sFamilyName.iOrder > 24 ? 24 : sFamilyName.iOrder}
            style={{ display: sFamilyName.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sFamilyName" showDefaultName="名称" {...sFamilyNameProps} />
          </Col>
          <Col
            span={6}
            order={dAdjustMoney.iOrder > 24 ? 24 : dAdjustMoney.iOrder}
            style={{ display: dAdjustMoney.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dAdjustMoney" showDefaultName="调整金额" {...dAdjustMoneyProps} />
          </Col>
          <Col
            span={6}
            order={sEmployeeId.iOrder > 24 ? 24 : sEmployeeId.iOrder}
            style={{ display: sEmployeeId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sEmployeeId" showDefaultName="调整人" {...sEmployeeIdProps} />
          </Col>
          <Col
            span={6}
            order={sCheckPerson.iOrder > 24 ? 24 : sCheckPerson.iOrder}
            style={{ display: sCheckPerson.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sCheckPerson" showDefaultName="审核人" {...sCheckPersonProps} />
          </Col>
          <Col
            span={6}
            order={sBillNo.iOrder > 24 ? 24 : sBillNo.iOrder}
            style={{ display: sBillNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sBillNo" showDefaultName="单号" {...sBillNoProps} />
          </Col>
          <Col
            span={6}
            order={tCreateDate.iOrder > 24 ? 24 : tCreateDate.iOrder}
            style={{ display: tCreateDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tCreateDate" showDefaultName="制单日期" {...tCreateDateProps} />
          </Col>
          <Col
            span={6}
            order={sMakePerson.iOrder > 24 ? 24 : sMakePerson.iOrder}
            style={{ display: sMakePerson.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMakePerson" showDefaultName="制单人" {...sMakePersonProps} />
          </Col>
          <Col
            span={6}
            order={tAdjustDate.iOrder > 24 ? 24 : tAdjustDate.iOrder}
            style={{ display: tAdjustDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tAdjustDate" showDefaultName="调整日期" {...tAdjustDateProps} />
          </Col>
          <Col
            span={6}
            order={tCheckDate.iOrder > 24 ? 24 : tCheckDate.iOrder}
            style={{ display: tCheckDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tCheckDate" showDefaultName="审核日期" {...tCheckDateProps} />
          </Col>
          {reserveContent}
          <Col
            span={21}
            order={sMemo.iOrder > 24 ? 24 : sMemo.iOrder}
            style={{ display: sMemo.bVisible ? 'block' : 'none', marginBottom: 24 }}
          >
            <ShowType
              sName="sMemo"
              showDefaultName="调整事由"
              {...sMemoProps}
              formItemLayout={allformItemLayout}
              rows={6}
              textArea
            />
          </Col>
        </Row>
        <button className={styles.collapseA} onClick={this.handleToggle}>
          <span>{expand ? '缩略展示' : '显示全部'}</span><Icon type={expand ? 'up' : 'down'} />
        </button>
      </FormItem>
    );
  }
}

export default TabMainTableComponent;
